<template>
  <div>
    <div>企业管理</div>
    <el-card>
      <div>
        <el-row :gutter="10">
          <el-col :span="6">
            <el-col :span="8">
              <div class="grid-content bg-purple div_text">标签名称</div>
            </el-col>
            <el-col :span="16">
              <div class="grid-content bg-purple">
                <el-input v-model="inputObj.tags" placeholder="请输入内容" />
              </div>
            </el-col>
          </el-col>
          <el-col :span="6">
            <el-col :span="8">
              <div class="grid-content bg-purple div_text">城市</div>
            </el-col>
            <el-col :span="16">
              <div class="grid-content bg-purple">
                <el-select
                  v-model="inputObj.province"
                  placeholder="请选择"
                  @change="cityChangeFn"
                >
                  <el-option
                    v-for="item in provinceList"
                    :key="item.id"
                    :label="item.label"
                    :value="item.label"
                  />
                </el-select>
              </div>
            </el-col>
          </el-col>
          <el-col :span="6">
            <el-col :span="8">
              <div class="grid-content bg-purple div_text">地区</div>
            </el-col>
            <el-col :span="16">
              <div class="grid-content bg-purple">
                <el-select v-model="inputObj.city" placeholder="请选择">
                  <el-option
                    v-for="item in cityList"
                    :key="item.id"
                    :label="item.label"
                    :value="item.label"
                  />
                </el-select>
              </div>
            </el-col>
          </el-col>
          <el-col :span="6">
            <el-col :span="8">
              <div class="grid-content bg-purple div_text">企业简称</div>
            </el-col>
            <el-col :span="16">
              <div class="grid-content bg-purple">
                <el-input
                  v-model="inputObj.shortName"
                  placeholder="请输入内容"
                />
              </div>
            </el-col>
          </el-col>
        </el-row>
        <el-row :gutter="10">
          <el-col :span="6">
            <el-col :span="8">
              <div class="grid-content bg-purple div_text">状态</div>
            </el-col>
            <el-col :span="16">
              <div class="grid-content bg-purple">
                <el-select v-model="inputObj.state" placeholder="请选择">
                  <el-option
                    v-for="item in stateList"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>
              </div>
            </el-col>
          </el-col>
          <el-col :span="6">
            <el-col :span="8">
              <div class="grid-content bg-purple">
                <el-button @click="clearFormFn">清除</el-button>
              </div>
            </el-col>

            <el-col :span="8">
              <div class="grid-content bg-purple">
                <el-button type="primary" @click="checkResFn">搜索</el-button>
              </div>
            </el-col>
          </el-col>
          <el-col :span="12">
            <el-col :span="6" :push="18">
              <div class="grid-content bg-purple">
                <el-button
                  type="success"
                  icon="el-icon-edit"
                  @click="addUserFn"
                >
                  新增用户
                </el-button>
              </div>
            </el-col>
          </el-col>
        </el-row>
      </div>
      <div style="margin-top: 10px">
        <el-alert
          :title="`共${total}条记录`"
          type="info"
          show-icon
          :closable="false"
        />
      </div>
      <div style="margin-top: 10px">
        <el-table :data="tableData" style="width: 100%">
          <el-table-column type="index" label="序号" :index="indexMethod" />
          <el-table-column prop="number" label="企业编号" />
          <el-table-column prop="shortName" label="企业简称" />
          <el-table-column prop="tags" label="标签" />
          <el-table-column prop="creatorID" label="创建者" />
          <el-table-column prop="addDate" label="创建日期">
            <template slot-scope="{ row }">
              {{ formatTime(row.addDate, 'YYYY-MM-DD') }}
            </template>
          </el-table-column>
          <el-table-column prop="remarks" label="备注" />
          <el-table-column prop="state" label="状态">
            <template slot-scope="{ row }">
              {{ row.state === 0 ? '禁用' : '启用' }}
            </template>
          </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="{ row }">
              <el-button
                icon="el-icon-edit"
                type="primary"
                style="
                  color: #409eff;
                  background: #ecf5ff;
                  border-color: #b3d8ff;
                "
                size="mini"
                circle
                @click="handleEdit(row)"
              />
              <el-tooltip
                class="item"
                effect="dark"
                :content="row.state === 0 ? '启用' : '禁用'"
                placement="top-start"
              >
                <el-button
                  :icon="row.state === 0 ? 'el-icon-check' : 'el-icon-close'"
                  :type="row.state === 0 ? 'success' : 'warning'"
                  :style="{
                    color: row.state === 0 ? '#67c23a' : '#e6a23c',
                    background: row.state === 0 ? '#f0f9eb' : '#fdf6ec',
                    borderColor: row.state === 0 ? '#c2e7b0' : '#f5dab1'
                  }"
                  size="mini"
                  circle
                  @click="EnableFn(row)"
                />
              </el-tooltip>

              <el-button
                icon="el-icon-delete"
                type="danger"
                style="
                  color: #f56c6c;
                  background: #fef0f0;
                  border-color: #fbc4c4;
                "
                size="mini"
                circle
                @click="handleDelete(row)"
              />
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页 -->
        <el-pagination
          :current-page="page"
          :page-sizes="[2, 5, 10, 15, 20]"
          :page-size="pagesize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </el-card>
    <companyDialog
      ref="companyDialog"
      :title="title"
      :dialog-form-visible.sync="dialogFormVisible"
      @getComList="getCompanyList"
    />
    <editCompanyDialog
      ref="editCompanyDialog"
      :title="title"
      :show-dialog.sync="showDialog"
      @getComList="getCompanyList"
    />
  </div>
</template>

<script>
import {
  deleteCompanyApi,
  getCompanyListApi,
  updateCompanyStateApi
} from '@/api/company'
import Const from '@/const/const'

import companyDialog from './components/companyDialog.vue'
import editCompanyDialog from './components/editCompanyDialog.vue'
import { formatTime } from '@/filter'
export default {
  components: {
    companyDialog,
    editCompanyDialog
  },
  data() {
    return {
      // 弹层的标题
      title: '',
      // 新增弹层的显隐
      dialogFormVisible: false,
      // 控制编辑
      showDialog: false,
      // 加载中
      loading: false,
      // 当前数据的总数
      total: 0,

      // 地区列表
      cityList: [],
      // 城市列表
      provinceList: [
        {
          id: 0,
          label: '北京'
        },
        {
          id: 1,
          label: '上海'
        },
        {
          id: 2,
          label: '济南'
        },
        {
          id: 3,
          label: '西川'
        }
      ],
      // 状态列表
      stateList: [
        {
          value: 0,
          label: '禁用'
        },
        {
          value: 1,
          label: '启用'
        }
      ],
      // 搜索条件对象
      inputObj: {
        // 标签名称
        tags: '',
        // 区
        city: '',
        // 市
        province: '',
        // 企业简称
        shortName: '',
        // 状态
        state: null
      },
      // 表格数据数组
      tableData: [],
      // 总页数
      pages: 1,
      // 当前页码
      page: 1,
      // 每页的数据条数
      pagesize: 10,
      // 公司的id
      CompanyId: '',
      // icon
      iconState: 'el-icon-check'
    }
  },
  watch: {},
  created() {
    this.getCompanyList()
  },
  methods: {
    formatTime,
    // 当城市的值改变时-我们给地区列表赋值
    cityChangeFn(val) {
      /*  console.log(val) */
      if (val) {
        this.cityList = Const.cityList
      }
    },
    // 序号
    indexMethod(index) {
      return index + 1 + (this.page - 1) * this.pagesize
    },
    // 获取企业数据列表
    async getCompanyList() {
      this.loading = true
      const obj = {
        page: this.page,
        pagesize: this.pagesize
      }
      const res = await getCompanyListApi(obj)
      this.total = res.data.counts
      this.tableData = res.data.items
      /*    console.log(this.tableData) */
      // this.handleState()
    }, // 搜索--筛选
    async checkResFn() {
      const obj = {}
      for (const key in this.inputObj) {
        if (this.inputObj[key] || this.inputObj[key] === 0) {
          obj[key] = this.inputObj[key]
        }
      }
      /*    console.log(obj) */
      const res = await getCompanyListApi(obj) // /*  console.log(res) */
      this.total = res.data.counts
      this.tableData = res.data.items // this.handleState()
    },
    // 获取城市列表
    async getCityList() {
      const res = await getCompanyListApi({ page: 1, pagesize: 9999 })
      this.tableData = res.data.items
      const arr = []
      this.tableData.forEach((item) => {
        if (!arr.includes(item.city)) {
          arr.push(item.city)
        }
      })
      const list = []
      arr.forEach((it, index) => {
        const obj = {}
        obj.label = it
        obj.value = index
        list.push(obj)
      })
      this.cityList = list
    },
    // 处理状态数据显示成汉字
    handleState() {
      this.tableData.forEach((item) => {
        Const.stateType.find((it) => {
          if (it.id === item.state) {
            return (item.state = it.label)
          }
        })
      })
    },
    // 改变每页的条数
    handleSizeChange(val) {
      // console.log(`每页 ${val} 条`)
      this.pagesize = val
      this.getCompanyList()
    },
    // 改变当前的页码
    handleCurrentChange(val) {
      // console.log(`当前页: ${val}`)
      this.page = val
      this.getCompanyList()
    },
    // 清空表单输入框数据
    clearFormFn() {
      this.inputObj = {
        // 标签名称
        tags: '',
        // 区
        city: '',
        // 市
        province: '',
        // 企业简称
        shortName: '',
        // 状态
        state: null
      }
      this.cityList = []
    },
    // 新增用户
    addUserFn() {
      this.title = '新增用户'
      this.dialogFormVisible = true
    },
    // 编辑用户
    handleEdit(row) {
      // console.log(row.id)
      this.title = '编辑用户'
      this.showDialog = true
      this.$refs.editCompanyDialog.getCompanyInfo(row.id)
    },

    // 禁用
    async EnableFn(row) {
      if (row.state === 1) {
        this.$confirm('已成功启用, 是否禁用?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
          .then(async () => {
            await updateCompanyStateApi(row.id, row.state === 1 ? 0 : 1)
            this.$message({
              type: 'success',
              message: '禁用成功!'
            })
            this.getCompanyList()
          })
          .catch(() => {
            this.$message({
              type: 'info',
              message: '已取消禁用'
            })
          })
      } else {
        this.$confirm('已成功禁用, 是否启用?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
          .then(async () => {
            await updateCompanyStateApi(row.id, row.state === 1 ? 0 : 1)
            this.$message({
              type: 'success',
              message: '启用成功!'
            })
            this.getCompanyList()
          })
          .catch(() => {
            this.$message({
              type: 'info',
              message: '已取消启用'
            })
          })
      }
    },
    // 删除
    handleDelete(row) {
      this.$confirm('此操作将永久删除该用户, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async () => {
          await deleteCompanyApi(row.id)
          this.getCompanyList()
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    }
  }
}
</script>

<style scoped lang="scss">
.div_text {
  // font-size: 18px;
  text-align: center;
  line-height: 36px;
}
.el-input {
  width: 100%;
}
.el-row {
  margin-bottom: 20px;
  &:last-child {
    margin-bottom: 0;
  }
}
.el-col {
  border-radius: 4px;
}
.bg-purple-dark {
  background: #99a9bf;
}
.bg-purple {
  background: #ffffff;
}
.bg-purple-light {
  background: #e5e9f2;
}
.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}
</style>
